<template>
  <div class="xmind-context-top-actionbar">
    <div class="actionbar">
      <div
        class="toolbar-btn"
        :class="{ 'x_disabled': item.disabled, 'has_dropdown': !!item.list }"
        :style="{ top: item.top }"
        v-for="item in leftActionBars"
        :key="item.action"
        @click="handlerClick(item)">
        <div>
          <el-tooltip :persistent="false" :show-after="300">
            <template #content><p style="font-size: 11px;">{{ item.name }}</p></template>
            <span v-if="!item.svgIcon" :class="`iconfont ${item.icon}`"></span>
            <p v-else class="svg-block">
              <svg class="svg-block-icon">
                <use :xlink:href="`#${item.icon}`"></use>
              </svg>
            </p>
          </el-tooltip>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits, computed } from 'vue'

const emits = defineEmits(['h-click'])
const props = defineProps({
  nodeId: {
    type: String,
    default: ''
  },
  historyStep: {
    type: Array,
    default: () => []
  },
  currentStep: {
    type: Number,
    default: 0
  },
  batchNodes: {
    type: Array,
    default: () => []
  },
  isRoot: Boolean
})

const leftActionBars = computed(() => {
  return [
    {
      name: '主题',
      icon: 'ri-mind-map',
      action: 'insert-brother',
      disabled: !props.nodeId || props.isRoot
    },
    {
      name: '子主题',
      icon: 'ri-node-tree',
      action: 'insert-child',
      disabled: !props.nodeId
    },
    {
      name: '标记',
      icon: 'ri-star-smile-line',
      action: 'insert-marker',
      disabled: !props.nodeId
    },
    {
      name: '图片',
      icon: 'ri-image-line',
      action: 'insert-tupian',
      disabled: !props.nodeId
    },
    {
      name: '超链接',
      icon: 'ri-links-line',
      action: 'insert-link',
      disabled: !props.nodeId
    },
    {
      name: '备注',
      icon: 'ri-chat-quote-line',
      action: 'insert-beizhu',
      disabled: !props.nodeId
    },
    {
      name: '任务',
      icon: 'ri-checkbox-multiple-line',
      action: 'insert-task',
      disabled: !props.nodeId || props.isRoot
    },
    {
      name: '标签',
      icon: 'ri-bookmark-2-line',
      action: 'insert-tag',
      disabled: !props.nodeId
    },
    {
      name: '概要',
      icon: 'icon-kuohaotu',
      action: 'insert-summary',
      disabled: !props.nodeId || props.isRoot,
      svgIcon: true
    },
    {
      name: '外框',
      icon: 'ri-shape-2-line',
      action: 'insert-out-border',
      disabled: !props.nodeId || props.isRoot
    },
    {
      name: '关系',
      icon: 'ri-guide-line',
      action: 'insert-relation',
      disabled: !props.nodeId,
      top: '-1px'
    },
    {
      name: '方程式',
      icon: 'ri-formula',
      action: 'insert-latex',
      disabled: !props.nodeId
    },
    {
      name: '主题锚点',
      icon: 'icon-zhifeiji_line-copy',
      action: 'insert-topiclink',
      disabled: !props.nodeId,
      svgIcon: true
    }
  ]
})

function handlerClick (rowItem) {
  if (rowItem.disabled) return
  emits('h-click', rowItem.action)
}
</script>

<style lang="scss" scoped>
.xmind-context-top-actionbar {
  position: fixed;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 7;
  .actionbar {
    display: flex;
    background-color: #fff;
    padding: 10px 20px;
    border-radius: 6px;
    box-shadow: inset 0px 0px 3px 0px rgba(255, 255, 255, 0.1), 0px 0px 3px 0px rgba(0, 0, 0, 0.14), 0px 8px 40px 0px rgba(0, 0, 0, 0.06);
    margin-right: 20px;
    flex-shrink: 0;
    .toolbar-btn {
      text-align: center;
      position: relative;
      margin: 0 6px;
      transition: .18s;
      user-select: none;
      .svg-block {
        margin-top: 0;
        text-align: center;
        width: 26px;
        &-icon {
          width: 20px;
          height: 20px;
          fill: currentColor;
          overflow: hidden;
          margin-top: 3px;
        }
      }
      &:not(.x_disabled):active {
        opacity: .5;
      }
      &.x_disabled {
        opacity: .5;
        cursor: not-allowed;
      }
      &.has_dropdown {
        margin-right: 12px;
      }
      &.drop {
        margin-right: 12px;
      }
      span {
        font-size: 18px;
        color: #333;
        display: block;
        border-radius: 4px;
        padding: 4px;
      }
      .ri-arrow-down-s-fill {
        position: absolute;
        top: 6px;
        right: -10px;
      }
    }
  }
}
</style>
